<template>
    <sub-box :class="{'inside': inside}" v-loading="loading">
        <breadcrumb v-if="!inside" :title="'新建自建系统'">
            <el-button type="primary" size="small mr10" @click="add">保存</el-button>
        </breadcrumb>
        <div class="built-info white-block">
            <div class="head-line">自建系统信息</div>
            <el-form class="form-common" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.5rem">
                <el-form-item label="自建系统名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="自建系统代码">
                    <el-link type="primary" :underline="false">自动获取</el-link>
                </el-form-item>
                <el-form-item label="自建系统描述" prop="remark">
                    <el-input v-model="ruleForm.remark" type="textarea"
                              :autosize="{ minRows: 4, maxRows: 4}"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="built-address white-block">
            <div class="head-line">服务地址</div>
            <table-list :data="ipList" :tableColumn="header" :slotColumns="slotColumns" ref="table">
                <template slot="code" slot-scope="scope">
                    <span>{{scope.$index+1}}</span>
                </template>
                <template slot="ip" slot-scope="scope">
                    <el-input v-model="scope.row.ip" placeholder="" style="width: 50%;"></el-input>
                </template>
                <template slot="operate" slot-scope="scope">
                    <el-link type="primary" icon="el-icon-delete" :underline="false" @click="remove(scope.$index)">删除
                    </el-link>
                </template>
            </table-list>
            <el-button class="small mt20" size="small" type="primary" @click="addIp">添加</el-button>
        </div>
    </sub-box>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import subBox from '../../components/layout/layout-sub'
    import tableList from '../../components/table'
    import dialogBox from '../../components/dialog'

    export default {
        name: '',
        data() {
            return {
                ruleForm: {
                    name: '',
                    remark: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ]
                },
                ipList: [],
                header: [
                    {
                        prop: 'code',
                        label: '编号',
                        minWidth: '25%',
                        align: 'center'
                    },
                    {
                        prop: 'ip',
                        label: 'IP',
                        minWidth: '50%',
                        align: 'center'
                    },
                    {
                        prop: 'operate',
                        label: '操作',
                        minWidth: '40%',
                        align: 'center'
                    }
                ],
                slotColumns: ['code', 'ip', 'operate'],
                show: false,
                data: {},
                loading: false,
                id: '',
                currentIp: null,
                pattern: /^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)$/
            }
        },
        props: ['inside'],
        mounted() {
        },
        methods: {
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            add(callback) {
                let _this = this
                this.validate('ruleForm', () => {
                    let num = 0, errorIp = null
                    for (let i = 0; i < this.ipList.length; i++) {
                        if (!_this.pattern.test(_this.ipList[i].ip) && num < 1) {
                            errorIp = _this.ipList[i]
                            num++
                        }
                    }
                    if (num < 1) {
                        this.loading = true
                        this.$http.post('/dept/workbench/createApp', {
                            name: this.ruleForm.name,
                            description: this.ruleForm.remark,
                            appIpList: this.ipList,
                            def: 0
                        }).then(result => {
                            this.loading = false
                            if (!this.inside) {
                                this.$emit('upload')
                                this.$nextTick(() => {
                                    this.$method.historyBack()
                                })
                            } else {
                                if (callback) callback()
                            }
                        }).catch(() => {
                            this.loading = false
                        })
                    } else {
                        this.$alert(errorIp.ip ? 'ip：' + errorIp.ip + '格式错误' : 'ip不能为空', '提示', {
                            confirmButtonText: '确定',
                            closeOnClickModal: true,
                            callback: action => {
                            },
                            closeOnPressEscape: true
                        })
                    }
                })
            },
            addIp() {
                this.ipList.push({
                    bindResIdList: [],
                    id: null,
                    ip: ''
                })
                this.$method.updateView(true, true)
            },
            remove(index) {
                this.ipList.splice(index, 1)
                this.$method.updateView(true, true)
            }
        },
        components: {
            breadcrumb,
            subBox,
            tableList,
            dialogBox
        }
    }
</script>

<style scoped lang="less">
    .built-info {
        .line {
            margin-bottom: .2rem;

            > * {
                display: inline-block;
                max-width: 9rem;
            }

            label {
                float: left;
                width: 1.5rem;
                text-align: right;
                margin-right: 0.15rem;
                line-height: .4rem;
                font-size: .16rem;
            }

            .el-link {
                line-height: .4rem;
            }
        }
    }

    .built-address {
        margin-top: .3rem;
    }

    .form-common {
        max-width: 10rem;
    }

    .inside {
        margin: -20px -20px 0 -20px;
        background: #fff;
        position: static;
        .built-info {
            margin-top: -.3rem;
        }
    }
</style>
